<template>
  <div class="dashboard-container">
    <!-- 面板 -->
    <div class="card-panel">
      <card title="New Visits"></card>
      <card title="Messages" icon-name="el-icon-s-comment" icon-color="#36a3f7" :num="676552"></card>
      <card title="Purchases" icon-name="el-icon-s-opportunity" icon-color="#f4516c" :num="3243234"></card>
      <card title="Shoppings" icon-name="el-icon-s-cooperation" icon-color="#33bfa3" :num="976556"></card>
    </div>
    <!-- 折线图 -->
    <div class="line">
      <LineChart></LineChart>
    </div>
    <div class="otherGraph">
      <div class="graph">
        <RadarMap></RadarMap>
      </div>
      <div class="graph">
        <PieGraph></PieGraph>
      </div>
      <div class="graph">
        <BarChart></BarChart>
      </div>
    </div>
  </div>
</template>

<script>
import Card from './cnps/card.vue'
import LineChart from './cnps/lineChart.vue'
import RadarMap from './cnps/radarMap.vue'
import PieGraph from './cnps/pieGraph.vue'
import BarChart from './cnps/barChart.vue'
export default {
  name: 'Dashboard',
  components: { Card, LineChart, RadarMap, PieGraph, BarChart }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  width: 100%;
  height: 100%;
  background-color: var(--header-bg-color);
  padding: 50px 30px;
}
.card-panel {
  display: flex;
  justify-content: space-between;
}
.line {
  width: 100%;
  margin-top: 20px;
}
.otherGraph {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .graph {
    width: 32%;
    // background-color: white;
    height: 300px;
  }
}
</style>
